<template>
    <view class="content">
        <view class="box" v-for="(item, index) in list" :key="index">
			<view class="u-flex-1">
				<view class="item">
					<view class="left">姓名</view>
					<view class="right">{{item.nickname}}</view>
				</view>
				<view class="item">
					<view class="left">账号</view>
					<view class="right">{{item.username}}</view>
				</view>
				<view class="item">
					<view class="left">角色</view>
					<view class="right">{{item.role_name}}</view>
				</view>
			</view>
			<view class="btn" @click="change(item)">{{ item.status == 1 ? '禁用' : '启用' }}</view>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
		
		<view class="footer" v-if="role == 1 || role == 2" @click="$gTo(`./create`)">创建员工</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				role: 1,//1超级管理员 2人力资源 3内勤 4外勤 5运营客服
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
            };
        },
        onLoad() {
            
        },
		onShow() {
			this.list = []
			this.page = 1
			this.status = 'loadmore'
			this.getList()
			
			if (this.$getSync('roleId')) {
				this.role = this.$getSync('roleId')
				console.log('this.role', this.role)
			}
		},
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
			change(item) {
				this.$ajax('staff_users_status', {
				    userToken: this.$getSync('userToken'),
				    userid: item.id,
				    status: item.status == 1 ? 0 : 1,//1-启用 0-禁用
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
				        item.status = item.status == 1 ? 0 : 1
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('staff_users_list', {
                    userToken: this.$getSync('userToken'),
                    page: this.page,
                    limit: 10,
                }).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.length > 0) {
                        	this.list = this.list.concat(ret.data);
                        	this.page++;
                        	this.status = 'loadmore'
                        } else {
                        	this.status = 'nomore'
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 20rpx 20rpx 100px;
	}
	.box{
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 18rpx;
		font-size: 26rpx;
	}
	.item:last-child{
		padding-bottom: 0;
	}
	.left{
		color: #8e8e8e;
		padding-right: 25rpx;
	}
	.right{
		flex: 1;
		color: #000;
	}
	.btn{
		font-size: 28rpx;
		color: #00b7bd;
		padding: 14rpx 50rpx;
		border: 2rpx solid #00b7bd;
		border-radius: 50rpx;
	}
	
	.footer{
		width: 750rpx;
		height: 90rpx;
		background-color: #01b6bd;
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}

</style>
